<template>
    <div class="layout-user" :route="routename">

        <Headerbar v-if="isLogin" />

        <div class="layout-aside" :class="{ unlogin: !isLogin }">
            <nuxt-link to="/"><svg-icon name="logo" /></nuxt-link>
            <UserMenu />
        </div>

        <div class="layout-content" v-if="isLogin">
            <Nuxt class="layout-page" />
            <span>© {{ new Date().getFullYear() }} PODpartner, Inc. All rights reserved.</span>
        </div>

        <!-- 登录 -->
        <Login :force="true" />
        <!-- 物流计算器弹窗 -->
        <LogisticsComputedDialog />
        <!-- 选择商品 -->
        <ProductSelectDialog />

        <!-- 移动端禁用界面 -->
        <WapForbid />

    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    head () {
        return {
            bodyAttrs: {
                class: "body-user",
            }
        };
    },
    data () {
        return {
        };
    },
    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
        routename () {
            return this.$route.name || '';
        },
        model () {
            const path = this.$route.path || '';
            const match = path.match(/\w+/) || [];
            return match[0] || ''
        },
        forbid () {
            const path = this.$route.path || '';
            // const name = path.replace(/\/(\w+)(\/[\W\w]*)?/, '$1')
            return path != '/user'
        },
    },

    methods: {
    },
    created () {
    },

};
</script>
<style lang="scss" scoped>
.layout-user {
    padding-left: 228px;
}

.layout-aside {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 227px;
    border-right: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    background-color: #f4f4f4;
    z-index: 3;

    &>a {
        height: 80px;
        min-height: 80px;
        display: flex;
        margin: 0;
        padding: 0 20px;
        align-items: center;

        img {
            height: 22px;
        }

        svg {
            width: 120px;
            height: 22px;
        }
    }

    .menu {
        flex: 1;
    }

    &>button {
        margin: 0 10px;
        width: calc(100% - 20px);
        height: 32px;
        line-height: 32px;
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        border: none;
    }

    &.unlogin {
        background: none;
        border: none;

        aside {
            display: none;
        }
    }
}

.layout-header {
    position: fixed;
    left: 228px;
    width: calc(100vw - 228px);
    top: 0;
    z-index: 10;
    height: 60px !important;

    &::v-deep {
        .header {
            width: 100%;
            padding: 0 24px;
            height: 60px;
            position: relative;
            background-color: transparent;
            border: none;

            .header-logo,
            .header-nav ul {
                display: none;
            }
        }
    }
}

.layout-content {
    padding: 0 24px;
    min-width: 800px;

    &>span {
        display: block;
        text-align: center;
        font-size: 12px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #9e9e9e;
        line-height: 14px;
        padding: 14px;
    }
}

.layout-page {
    min-height: calc(100vh - 42px);
    max-width: 1080px;
    box-sizing: border-box;
    padding: 48px 0;
    margin: 0 auto;

    &::v-deep {
        .fixed-head {
            position: fixed;
            left: 228px;
            top: 0;
            z-index: 11;
            right: 0;
            height: 60px;
            padding: 0 32px;
            line-height: 60px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.5s;
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
        }

        .fixed-form {
            position: fixed;
            left: 228px;
            top: 0;
            z-index: 11;
            right: 0;
            height: 60px;
            padding: 0 32px;
            line-height: 60px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.5s;
        }
    }

    &[fixed-head]::v-deep .fixed-head {
        opacity: 1;
    }

    &[fixed-form]::v-deep .fixed-form {
        opacity: 1;
    }
}

@media (max-width: 960px) {
    .layout-header::v-deep .header {
        .header-menu {
            display: none;
        }
    }

    .layout-content {
        &::v-deep .user-fixed-form {
            display: none;
        }
    }
}

@media (max-width: 640px) {
    .layout-header::v-deep .header {
        background-color: #fff;
    }

    .layout-aside {
        background-color: #fff;
        border-color: transparent;
    }
}
</style>
